<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<!-- <el-button type="primary" @click="AddClick()">添加</el-button> -->
				<el-input type="input" autosize placeholder="请输入会员ID" v-model="fy.uid" @keyup.enter.native="seachEnter"
					style="width: 300px;margin-left: 20px;">
				</el-input>
				<el-input type="input" autosize placeholder="请输入收货人姓名" v-model="fy.realName"
					@keyup.enter.native="seachEnter" style="width: 300px;margin-left: 20px;">
				</el-input>
				<el-button type="primary" icon="el-icon-search" @click="SearchData()">搜索</el-button>
				<el-button type="primary" @click="selfMention()">自提地址</el-button>
			</div>
			<el-table :data="AddressList" border>
				<el-table-column prop="uid" label="会员ID" />
				<el-table-column prop="realName" label="收货人姓名" />
				<el-table-column prop="phone" label="收货人电话" />
				<el-table-column prop="provinceCityDistrict" label="收货人所在省，市，县" />
				<el-table-column prop="detail" label="收货人详细地址" />
				<el-table-column prop="postCode" label="邮编" />

				<el-table-column prop="isDefault" label="是否默认">
					<template slot-scope="scope">
						<span v-if="scope.row.isDefault == 1">是</span>
						<span v-else>否</span>
					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <div class="button">
              <el-button
                type="primary"
                size="mini"
                @click="UpdateClick(scope.row)"
                >修改</el-button
              >
              <el-button type="danger" size="mini" @click="DelClick(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column> -->
			</el-table>
			<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<el-form label-position="left" label-width="80px" :model="ObjectList">
					<el-form-item label="收货人姓名" v-if="!dialogVisible1">
						<el-input placeholder="请输入收货人姓名" v-model="ObjectList.realName"></el-input>
					</el-form-item>
					<el-form-item label="收货人电话">
						<el-input placeholder="请输入收货人电话" v-model="ObjectList.phone"></el-input>
					</el-form-item>
					<el-form-item label="收货人所在地">
						<el-input placeholder="请输入收货人所在地" v-model="ObjectList.provinceCityDistrict"></el-input>
					</el-form-item>
					<el-form-item label="收货人详细地址">
						<el-input placeholder="请输入收货人详细地址" v-model="ObjectList.detail"></el-input>
					</el-form-item>
					<el-form-item label="邮编" v-if="!dialogVisible1">
						<el-input placeholder="请输入邮编" v-model="ObjectList.postCode"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="ClickUser()">确 定</el-button>
				</span>
			</el-dialog>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15]"
				:page-size="fy.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import {
		timestampToTime
	} from "../../utils/date";
	import * as AddressApi from "@/api/Search";
	import * as syAddressApi from "@/api/Add";
	export default {
		data() {
			return {
				timestampToTime,
				AddressList: [],
				total: 0,
				fy: {
					size: 10,
					current: 1,
				},
				ObjectList: {
					realName: "",
					phone: "",
					provinceCityDistrict: "",
					detail: "",
					postCode: "",
				},
				title: "",
				dialogVisible: false,
				dialogVisible1: false,
			};
		},
		methods: {
			seachEnter(e) {
				var keyCode = window.event ? e.keyCode : e.which;
				if (keyCode == 13) {
					this.SearchData(); //搜索按钮的回调
				}
			},
			selfMention() {
				this.dialogVisible = true;
				this.dialogVisible1 = true;
				syAddressApi.getCompanyAddress().then((res) => {
					if (res.data.length > 0) {
						let data = res.data[0];
						this.ObjectList.id = data.id;
						this.ObjectList.realName = data.realName;
						this.ObjectList.phone = data.phone;
						this.ObjectList.provinceCityDistrict = data.provinceCityDistrict;
						this.ObjectList.detail = data.detail;
						this.ObjectList.postCode = data.postCode;
					}
				});
			},
			UpdateClick(row) {
				this.title = "修改用户地址信息";
				this.dialogVisible = true;
				syAddressApi.UpdateUserAddressID({
					id: row.id
				}).then((res) => {
					this.ObjectList.id = res.data.id;
					this.ObjectList.realName = res.data.realName;
					this.ObjectList.phone = res.data.phone;
					this.ObjectList.provinceCityDistrict = res.data.provinceCityDistrict;
					this.ObjectList.detail = res.data.detail;
					this.ObjectList.postCode = res.data.postCode;
				});
			},
			DelClick(row) {
				syAddressApi.DelUserAddress({
					idList: row.id
				}).then((res) => {
					if (res.data == true) {
						this.SearchData();
						this.$notify({
							title: "成功",
							message: "删除成功",
							type: "success",
						});
					} else {
						this.SearchData();
						this.$notify({
							title: "失败",
							message: "删除失败",
							type: "error",
						});
					}
				});
			},
			ClickUser() {
				if (this.ObjectList.id) {
					if (this.dialogVisible1) {
						syAddressApi
							.crmCompanyAddressUpdate({
								...this.ObjectList,
								token: this.$store.getters.token,
							})
							.then((res) => {
								if (res.data == true) {
									this.dialogVisible = false;
									this.SearchData();
									this.$notify({
										title: "成功",
										message: "修改成功",
										type: "success",
									});
								} else {
									this.dialogVisible = false;
									this.SearchData();
									this.$notify({
										title: "失败",
										message: "修改失败",
										type: "error",
									});
								}
							});
					} else {
						syAddressApi.UpdateUserAddress(this.ObjectList).then((res) => {
							if (res.data == true) {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "成功",
									message: "修改成功",
									type: "success",
								});
							} else {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "失败",
									message: "修改失败",
									type: "error",
								});
							}
						});
					}
				} else {
					syAddressApi.AddUserAddress(this.ObjectList).then((res) => {
						if (res.data == true) {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "成功",
								message: "新增成功",
								type: "success",
							});
						} else {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "失败",
								message: "新增失败",
								type: "error",
							});
						}
					});
				}
			},
			AddClick() {
				this.dialogVisible = true;
				this.title = "新增用户地址信息";
			},
			SearchData() {
				AddressApi.InsertUserAddress(this.fy).then((res) => {
					this.AddressList = res.data.records;
					this.total = res.data.total;
					this.AddressList.forEach((element) => {
						element.createTime = this.timestampToTime(element.createTime);
						element.updateTime = this.timestampToTime(element.updateTime);
					});
				});
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchData();
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
		},
		created() {
			this.SearchData();
		},
	};
</script>

<style lang="scss" scoped>
	.box-card {
		width: 95%;
		margin: auto;
	}

	.el-pagination {
		margin-top: 10px;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-textarea {
		margin-left: 20px;
		width: 20%;
	}
</style>
